import React, { useState } from 'react';
import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonButton, IonTextarea, IonNote } from '@ionic/react';
import { useOllama } from '../../hooks/useOllama';
import { useTranslation } from 'react-i18next';

interface ModelConfig {
  modelfile: string;
  quantization: string;
}

const ModelCreation: React.FC = () => {
  const { createModel, isLoading, error } = useOllama();
  const { t } = useTranslation();
  const [config, setConfig] = useState<ModelConfig>({
    modelfile: '',
    quantization: 'q4_0'
  });

  const handleConfigChange = (key: keyof ModelConfig, value: any) => {
    setConfig(prev => ({ ...prev, [key]: value }));
  };

  const handleCreateModel = async () => {
    try {
      await createModel('custom-model', config.modelfile);
    } catch (error) {
      console.error('Failed to create model:', error);
    }
  };

  return (
    <IonCard>
      <IonCardHeader>
        <IonCardTitle>{t('models.create.title')}</IonCardTitle>
      </IonCardHeader>
      <IonCardContent>
        <div className="space-y-4">
          {/* Model Configuration */}
          <div className="space-y-2">
            <IonItem>
              <IonLabel position="stacked">{t('models.create.modelfile')}</IonLabel>
              <IonTextarea
                value={config.modelfile}
                onIonChange={e => handleConfigChange('modelfile', e.detail.value!)}
                placeholder={t('models.create.placeholder')}
                rows={6}
                className="font-mono"
              />
            </IonItem>

            <IonItem>
              <IonLabel position="stacked">{t('models.create.quantization')}</IonLabel>
              <IonSelect
                value={config.quantization}
                onIonChange={e => handleConfigChange('quantization', e.detail.value)}
              >
                <IonSelectOption value="q4_0">{t('models.create.help.quantization.q4_0')}</IonSelectOption>
                <IonSelectOption value="q4_1">{t('models.create.help.quantization.q4_1')}</IonSelectOption>
                <IonSelectOption value="q5_0">{t('models.create.help.quantization.q5_0')}</IonSelectOption>
                <IonSelectOption value="q5_1">{t('models.create.help.quantization.q5_1')}</IonSelectOption>
                <IonSelectOption value="q8_0">{t('models.create.help.quantization.q8_0')}</IonSelectOption>
              </IonSelect>
            </IonItem>
          </div>

          {/* Error Display */}
          {error && (
            <div className="alert alert-error">
              <span>{error}</span>
            </div>
          )}

          {/* Create Button */}
          <div className="flex justify-end">
            <IonButton
              onClick={handleCreateModel}
              disabled={isLoading || !config.modelfile}
            >
              {isLoading ? t('common.loading') : t('common.create')}
            </IonButton>
          </div>

          {/* Help/Info Section */}
          <div className="mt-4 p-4 bg-base-200 rounded-lg">
            <h3 className="text-lg font-semibold mb-2">{t('models.create.help.title')}</h3>
            <p className="text-sm">
              {t('models.create.help.description')}
            </p>
            <h4 className="text-md font-semibold mt-2 mb-1">{t('models.create.help.quantization.title')}</h4>
            <ul className="list-disc pl-6 mt-2 text-sm">
              <li>{t('models.create.help.quantization.q4_0')}</li>
              <li>{t('models.create.help.quantization.q4_1')}</li>
              <li>{t('models.create.help.quantization.q5_0')}</li>
              <li>{t('models.create.help.quantization.q5_1')}</li>
              <li>{t('models.create.help.quantization.q8_0')}</li>
            </ul>
          </div>
        </div>
      </IonCardContent>
    </IonCard>
  );
};

export default ModelCreation; 